在 Vue 3 中，你可能會看到有些 .vue 文件的 部分使用了 setup，這是因為 Vue 3 引入了一個新的組件編寫方式，叫做 Composition API。與之前的 Options API 不同，Composition API 允許你在 中使用更簡潔的語法來定義組件的邏輯。

setup 的作用

在 Vue 3 中，setup 是 Composition API 的一部分，它是一個專門用來定義組件邏輯的函數。當使用 標籤時，Vue 會自動處理這個函數的邏輯，使得組件編寫變得更加簡化和高效。

Composition API 與 setup

setup 函數是 Composition API 的核心，它在組件創建時執行，並且比 Options API 更加靈活。可以在 setup 中直接聲明響應式狀態、使用組件生命周期鉤子、以及管理組件的邏輯。

語法

Vue 3 提供了一種特殊的語法 ，這是一種語法糖，它使得 Composition API 的使用變得更加簡潔。在 中，你不需要手動導出組件的選項，也不需要在 setup 函數中返回數據或方法，這一切都被 Vue 自動處理了。

setup 方式的優點

• 簡化語法： 比常規的 Composition API 或 Options API 語法更簡潔，減少了冗餘代碼。
• 自動導出：組件中的變量、函數、props 會自動被視圖模板使用，無需手動導出。
• 頂層變量共享：在 中聲明的變量會直接作用於模板中，這讓代碼變得更加直觀。

範例比較

使用 Options API
這是 Vue 2 和 Vue 3 中常見的 Options API 寫法：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Options API'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated!';
    }
  }
}
</script>

使用 Composition API 的 setup

如果使用 Vue 3 的 Composition API，代碼變成這樣：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello from Composition API');
    
    function updateMessage() {
      message.value = 'Updated!';
    }
    
    return { message, updateMessage };
  }
}
</script>

使用 ，可以簡化上述的 Composition API 代碼：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello from Script Setup');
const updateMessage = () => {
  message.value = 'Updated!';
}
</script>

特點

1.自動導出： 中聲明的所有變量和函數會自動導出給模板使用，無需 return。
2.簡化組件邏輯：直接在 setup 區塊中編寫組件的邏輯，沒有上下文的 this，邏輯更清晰。
3.性能優化： 在編譯時進行了額外的性能優化，使其在大型應用中表現更好。

總結